<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>校园二手交易平台</title>
        <script src="../jquery/jquery-3.4.1.min.js"></script>
        <script src="../dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
        <script type="text/javascript" src="../js/vue-2.6.12.js"> </script>
        <script type="text/javascript" src="../js/vue-router-3.4.9.js"> </script>
        <script type="text/javascript" src="../js/myajax.js"></script>
        <script type="text/javascript" src="../js/qs-6.9.4.js"></script>
        <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
       <style>
           #main{
               margin-bottom: 20px;
           }
           body{
               background: #f0f2f5;
           }
           #navigation{
               width:220px;
               height: 350px;
               background: white;
               position: fixed;
               top: 100px;
               left:0px;
               text-align: center;
           }
           #main{
               margin-top: 70px;
               width: 1000px;
               position: absolute;
               left: 300px;
           }
       </style>
    </head>
    <body>
        <div id="app">
            <!--  导航条  -->
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <img alt="Brand" src="../img/zuaPlatform.png" height="50px">
                  </div>
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left">
                      <div class="form-group">
                             <input type="text" class="form-control" placeholder="请搜索想要的商品" v-model="entry">
                      </div>
                        <!--搜索物品组件-->
                        <router-link :to="{path:'/main/showSearch',query:{entry:entry}}">
                            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索</button>
                        </router-link>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <div v-if="user==undefined">
                            <!-- 登陆模态框按钮 -->
                          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".login">
                              登陆</button>
                            <!-- 注册模态框按钮 -->
                          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".register">
                              注册</button>
                        </div>
                        <div v-if="user!=undefined">
                          <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                <span class="el-dropdown-link">
                                    <img src="../img/1.jpg" style="height: 50px" class="img-circle"/>
                                </span></a>
                            <ul class="dropdown-menu">
                              <li><a href="/ZuaMarket/user/user.jsp">个人中心</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#" @click="quit()">退出</a></li>
                            </ul>
                          </li>
                        </div>
                    </ul>
                  </div>
                </div>
              </nav>
            <!--侧边栏-->
            <div id="navigation">
                <br>
                <br>
                    <a ><router-link to="/main/showNew"><h4>最新发布</h4></router-link></a>
                    <a v-for="catelog in catelogs" ><router-link :to="{path:'/main/showCatelog',query:{catelogId:catelog.id}}">
                        <h4>{{catelog.name}}</h4></router-link>
                    </a>
            </div>
            <!--主体内容-->
            <div id="main">
                <router-view></router-view>
            </div>
            <!-- 登陆模态框 -->
            <div class="modal fade login" role="dialog" aria-labelledby="mySmallModalLabel">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" style="text-align: center">登陆</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" action="">
                                 <div class="form-group">
                                     <label >用户名</label>
                                    <input class="form-control" type="text" placeholder="请输入用户名" v-model="loginUser.username">
                                 </div>
                                 <div class="form-group">
                                     <label >密码</label>
                                     <input class="form-control" type="password" placeholder="请输入密码" v-model="loginUser.password">
                                 </div>
                                 <div class="text-right">
                                     <button class="btn btn-primary" type="primary" data-dismiss="modal" @click="userLogin">登录</button>
                                     <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                 </div>
                                 <a href="" data-toggle="login" data-dismiss="login" data-target="#register">还没有账号？点我注册</a>
                         </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--注册模态框-->
            <div class="modal fade register" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" style="text-align: center">注册</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" action="">
                                <div class="form-group">
                                    <label >用户名</label>
                                    <input class="form-control" type="text" placeholder="请输入用户名" v-model="registerUser.username">
                                </div>
                                <div class="form-group">
                                    <label >手机号</label>
                                    <input class="form-control" type="text" placeholder="请输入手机号" v-model="registerUser.phone">
                                </div>
                                <div class="form-group">
                                    <label >邮箱</label>
                                    <input class="form-control" type="text" placeholder="请输入用户名" v-model="registerUser.email">
                                </div>
                                <div class="form-group">
                                    <label >密码</label>
                                    <input class="form-control" type="password" placeholder="请输入密码" v-model="registerUser.password">
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" type="primary" @click="userRegister" data-dismiss="modal">注册</button>
                                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                </div>
                                <a href="" data-toggle="login" data-dismiss="login" data-target="#register">已有账号？点我登陆</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--最新发布-->
        <template id="main-new">
            <div>
                <img src="../img/ximen.jpg" align="middle" style="margin-left: 200px" height="300px">
                <div>
                    <br/>
                    <span class="glyphicon glyphicon-hand-right">&nbsp;<a style="color: #0f0f0f;text-decoration: none">最新发布</a></span>
                    <br/>
                    <hr/>
                </div>
                <div class="col-sm-6 col-md-4" v-for="good in goods">
                    <div class="thumbnail">
                        <img :src="good.imgUrl" style="height: 230px" class="img-circle">
                        <div class="caption">
                            <h3>{{good.name}}</h3>
                            <p>原价：{{good.realPrice}}&nbsp;&nbsp;&nbsp;&nbsp;现价:{{good.price}}</p>
                            <p><a class="btn btn-primary" role="button" @click="collectGood(good.id)">收藏</a>
                                <a class="btn btn-default" role="button" @click="newOrder(good.id)">购买</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <!--按分类展示-->
        <template id="main-catelog">
            <div>
                <div>
                    <br/>
                    <span class="glyphicon glyphicon-hand-right">&nbsp;<a style="color: #0f0f0f;text-decoration: none">{{catelog.name}}</a></span>
                    <br/>
                    <hr/>
                </div>
                <div class="col-sm-6 col-md-4" v-for="good in goods">
                    <div class="thumbnail">
                        <img :src="good.imgUrl" style="height:230px" class="img-circle">
                        <div class="caption">
                            <h3>{{good.name}}</h3>
                            <p>原价：{{good.realPrice}}&nbsp;&nbsp;&nbsp;&nbsp;现价:{{good.price}}</p>
                            <p><a class="btn btn-primary" role="button" @click="collectGood(good.id)">收藏</a>
                                <a class="btn btn-default" role="button" @click="newOrder(good.id)">购买</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <!--按搜索展示-->
        <template id="main-search">
            <div>
                <div>
                    <br/>
                    <span class="glyphicon glyphicon-hand-right">&nbsp;<a style="color: #0f0f0f;text-decoration: none">您的搜索</a></span>
                    <br/>
                    <hr/>
                </div>
                <div class="col-sm-6 col-md-4" v-for="good in goods">
                    <div class="thumbnail">
                        <img :src="good.imgUrl" style="height: 230px" class="img-circle">
                        <div class="caption">
                            <h3>{{good.name}}</h3>
                            <p>原价：{{good.realPrice}}&nbsp;&nbsp;&nbsp;&nbsp;现价:{{good.price}}</p>
                            <p><a class="btn btn-primary" role="button" @click="collectGood(good.id)">收藏</a>
                                <a class="btn btn-default" role="button" @click="newOrder(good.id)">购买</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <script>
            /*分类展示*/
            const catelogForm={
                template:"#main-catelog",
                data(){
                    return{
                        goods:[],
                        good:{},
                        catelogId:"",
                        catelog:{}
                    }
                },
                created(){
                    this.selectCatelogGoods()
                },
                beforeRouteUpdate(to,from,next){
                    axios.get("/ZuaMarket/Good/main/catelogGoods/"+to.query.catelogId).then(resp=>{
                        let data = resp.data
                        this.goods = data.goods
                        this.catelog = data.catelog
                    })
                    next();
                },
                methods: {
                    /*查询该分类下所有的物品*/
                    selectCatelogGoods(){
                        console.log(this.$route.query.catelogId);
                        axios.get("/ZuaMarket/Good/main/catelogGoods/"+this.$route.query.catelogId).then(resp=>{
                            let data = resp.data
                            this.goods = data.goods
                            this.catelog = data.catelog
                        })
                    },
                    /*添加收藏*/
                    collectGood(id){
                        console.log(id)
                        axios.get("/ZuaMarket/Good/user/collectGood/"+id).then(resp=>{
                            let data = resp.data
                            let status = data.status
                            if(status=="noLogin"){
                                alert("请先登陆")
                            }
                            if(status=="success"){
                                alert("收藏成功")
                            }
                            if(status=="failed"){
                                alert("收藏失败")
                            }
                            console.log(status)
                        })
                    },
                    /*购买物品*/
                    newOrder(id){
                        console.log(id)
                        axios.get("/ZuaMarket/Good/user/newOrder/"+id).then(resp=>{
                            let data = resp.data
                            let status = data.status
                            console.log(status)
                            if(status=="noLogin"){
                                alert("请先登陆")
                            }
                            if(status=="success"){
                                alert("订单生成成功，请到个人中心进行支付")
                            }
                        })
                    }
                }
            }
            //最新发布
            const newForm={
                template:"#main-new",
                data(){
                    return{
                        goods:[],
                        good:{},
                    }
                },
                created(){
                    this.selectNewGoods()
                },
                methods: {
                    /*查询最新发布  六个*/
                    selectNewGoods(){
                        axios.get("/ZuaMarket/Good/main/newGoods").then(resp=>{
                            let data = resp.data
                            this.goods = data.goods
                        })
                    },
                    /*添加收藏*/
                    collectGood(id){
                        console.log(id)
                        axios.get("/ZuaMarket/Good/user/collectGood/"+id).then(resp=>{
                            let data = resp.data
                            let status = data.status
                            console.log(status)
                            if(status=="noLogin"){
                                alert("请先登陆")
                            }
                            if(status=="success"){
                                alert("收藏成功")
                            }
                            if(status=="failed"){
                                alert("收藏失败")
                            }
                        })
                    },
                    /*购买物品*/
                    newOrder(id){
                        console.log(id)
                        axios.get("/ZuaMarket/Good/user/newOrder/"+id).then(resp=>{
                            let data = resp.data
                            let status = data.status
                            console.log(status)
                            if(status=="noLogin"){
                                alert("请先登陆")
                            }
                            if(status=="success"){
                                alert("订单生成成功，请到个人中心进行支付")
                            }
                        })
                    }
                }
            }
            //个人搜索
            const searchForm={
                template:"#main-search",
                data(){
                    return{
                        goods:[],
                        good:{},
                    }
                },
                beforeRouteUpdate(to,from,next){
                  console.log(to);
                    axios.get("/ZuaMarket/Good/main/searchGoods/"+to.query.entry).then(resp=>{
                        let data = resp.data
                        console.log(data)
                        this.goods = data.goods
                    })
                },
                created(){
                    this.selectGoods()
                },
                methods: {
                    /*查询想要搜索的物品*/
                    selectGoods(){
                        console.log(this.$route.query.entry);
                        axios.get("/ZuaMarket/Good/main/searchGoods/"+this.$route.query.entry).then(resp=>{
                            let data = resp.data
                            console.log(data)
                            this.goods = data.goods
                        })
                    },
                    /*添加收藏*/
                    collectGood(id){
                        console.log(id)
                        axios.get("/ZuaMarket/Good/user/collectGood/"+id).then(resp=>{
                            let data = resp.data
                            let status = data.status
                            console.log(status)
                            if(status=="noLogin"){
                                alert("请先登陆")
                            }
                            if(status=="success"){
                                alert("收藏成功")
                            }
                            if(status=="failed"){
                                alert("收藏失败")
                            }
                        })
                    },
                    /*购买物品*/
                    newOrder(id){
                        console.log(id)
                        axios.get("/ZuaMarket/Good/user/newOrder/"+id).then(resp=>{
                            let data = resp.data
                            let status = data.status
                            console.log(status)
                            if(status=="noLogin"){
                                alert("请先登陆")
                            }
                            if(status=="success"){
                                alert("订单生成成功，请到个人中心进行支付")
                            }
                        })
                    }
                }
            }
            const router = new VueRouter({
                routes:[
                    {path:"/",redirect:"/main/showNew"},
                    {path: "/main/showNew",component:newForm},
                    {path:"/main/showCatelog",component: catelogForm},
                    {path:"/main/showSearch",component: searchForm},
                ]
            })
            const v = new Vue({
                el:"#app",
                data:{
                    catelogs:[],
                    catelog:{},
                    user:{},
                    loginUser:{},
                    registerUser:{},
                    entry:""
                },
                router,
                created() {
                    this.selectAllCatelog();
                },
                methods: {
                    /*查询所有的分类*/
                    selectAllCatelog(){
                        axios.get("/ZuaMarket/catelog/catelogs").then(resp=>{
                            let data = resp.data
                            this.catelogs = data.catelogs
                            this.user = data.user
                        })
                    },
                    /*登录*/
                    userLogin(){
                        var user = this.loginUser
                        axios.put("/ZuaMarket/User/user/login",user).then(resp=>{
                            let data = resp.data
                            let status = data.status
                            console.log(status)
                            if(status=="success"){
                                alert("登陆成功")
                                this.user = data.user
                            }else if(status=="failed"){
                                alert("账号或密码错误")
                            }
                        })
                        console.log(this.user)
                    },
                    /*注册*/
                    userRegister(){
                        var user = this.registerUser
                        axios.post("/ZuaMarket/User/user/register",user).then(resp=>{
                            let data = resp.data
                            let status = data.status
                            console.log(status)
                            if(status=="success"){
                                alert("注册成功")
                                this.user = data.user
                            }else if(status=="failed"){
                                alert("注册失败,请稍后重试")
                            }
                        })
                        console.log(this.user)
                    },
                    quit(){
                        axios.get("/ZuaMarket/User/user/quit").then(resp=>{
                            let data = resp.data
                            let status = data.status
                            console.log(status)
                            if(status=="quit"){
                                this.user = {}
                                alert("退出成功")
                                location.reload();
                            }
                        })
                    },
                    collectGood(id){
                        console.log(id)
                    }
                }
            })
        </script>
    </body>
</html>
